<template>
	<view>
	  <InputField
		v-if="field.component === 'InputField'"
		:value="formData[field.key]"
		:field="field"
		:isEdit="disabledValue"
		@update-value="updateValue()" 
	  />
	  <PickerField
		v-else-if="field.component === 'PickerField'"
		:value="formData[field.key]"
		:field="field"
		:isEdit="disabledValue"
		@update-value="updateValue()" 
	  />
	  <DatePickerField
		v-else-if="field.component === 'DatePickerField'"
		:value="formData[field.key]"
		:field="field"
		:isEdit="disabledValue"
		@update-value="updateValue()"
	  />
	  <ImageUploadField
		v-else-if="field.component === 'ImageUploadField'"
		:value="formData[field.key]"
		:field="field"
		:isEdit="disabledValue"
		@update-value="updateValue()"
	  />
	  <checkBoxField
		v-else-if="field.component === 'checkBoxField'"
		:value="formData[field.key]"
		:field="field"
		:isEdit="disabledValue"
		@update-value="updateValue()"
	  />
	  <DataSelectField
	  		v-else-if="field.component === 'dataSelectField'"
	  		:value="formData[field.key]"
	  		:field="field"
	  		:isEdit="disabledValue"
	  		@update-value="updateValue()"
	  />
	  <RegionPickerField
	  		v-else-if="field.component === 'RegionPickerField'"
	  		:value="formData[field.key]"
	  		:field="field"
	  		:isEdit="disabledValue"
	  		@update-value="updateValue()"
	  />
	  <FileUploadField 
		  v-else-if="field.component === 'FileUploadField'"
		  :value="formData[field.key]"
		  :field="field"
		  :isEdit="disabledValue"
		  @update-value="updateValue()">
	  </FileUploadField>
	  <EasyInputField
	  		v-else-if="field.component === 'EasyInputField'"
	  		:value="formData[field.key]"
	  		:field="field"
	  		:isEdit="disabledValue"
	  		@update-value="updateValue()" 
	  />
	  <SelectListField
	  		v-else-if="field.component === 'SelectListField'"
	  		:value="formData[field.key]"
	  		:field="field"
	  		:isEdit="disabledValue"
	  		@update-value="updateValue()" 
			:storeId="formData['storeId']"
	  />
	  <text v-else>
		  {{formData[field.key]}}
	  </text>
	</view>
</template>

<script>
	
import InputField from '@/components/fields/InputField.vue';
import PickerField from '@/components/fields/PickerField.vue';
import DatePickerField from '@/components/fields/DatePickerField.vue';
import ImageUploadField from '@/components/fields/ImageUploadField.vue';	
import CheckBoxField from '@/components/fields/checkBoxField.vue';	
import DataSelectField from '@/components/fields/dataSelectField.vue';	
import RegionPickerField from '@/components/fields/RegionPickerField.vue';
import FileUploadField from '@/components/fields/FileUploadField.vue';
import EasyInputField from '@/components/fields/EasyInputField.vue';
import SelectListField from '@/components/fields/SelectListField.vue';

	
export default {
  components: {
    InputField,
    PickerField,
    DatePickerField,
    ImageUploadField,
	CheckBoxField,
	DataSelectField,
	RegionPickerField,
	FileUploadField,
	EasyInputField,
	SelectListField
  },	
  props: {
    field: Object,
    isEdit: Boolean,
	fieldKey:String,
	formData:Object
  },
  data() {
    return {
		// value:''
	};  
  },
  onLoad:function(event) {
	console.log("field========================",field);
	console.log("fieldKey========================",fieldKey);
  	// this.value = formData[fieldKey];
	console.log("field========================",field);
	console.log("fieldKey========================",fieldKey);
	console.log("========================",);
  },
  
  computed: {
  	// 使用 computed 属性处理 value 的默认值
  	disabledValue() {
		if(!this.isEdit || this.field?.readOnly){
			return false;
		}else{
			return true;
		}
  	},
  },
  
  methods:{
	  updateValue(newValue){
		  console.log("父项newValue=========",newValue)
		  // 更新字段Value值，并触发事件通知父组件
		  this.formData[this.fieldKey] = newValue;
		  // const newFormData = { ...this.formData, fieldKey : newValue };
		  this.$emit('update-form-data',this.fieldKey,this.formData);  
	  }
  }
}
</script>